<template>
  <div class="top-button">
    <span
      v-for="(row, index) in menus"
      :key="index"
      :class="getClass(row)"
      @click="selectItem(row)"
    >
      <div>
        <img v-if="index === 0" src="@/assets/header/header01.png" />
        <img v-else-if="index === 1" src="@/assets/header/header02.png" />
        <img v-else-if="index === 2" src="@/assets/header/header03.png" />
        <img v-else-if="index === 3" src="@/assets/header/header04.png" />
        <img v-else src="@/assets/header/header05.png" />
        {{ row.meta.title }}
      </div>
    </span>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TopMenu",
  props: {},
  data() {
    return {
      menus: [],
      pathMap: {},
    };
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: (state) => state.user.permissionList,
    }),
  },
  watch: {
    $route(to) {
      Object.keys(this.pathMap).forEach((item) => {
        if (to.path.indexOf(item) > -1) {
          this.$store.commit("SET_SELECTEDMENUITEM", this.pathMap[item]);
        }
      });
    },
  },
  created() {
    this.menus = [];
    this.permissionMenuList.forEach((item) => {
      if (!item.hidden) {
        this.menus.push(item);
        this.pathMap[item.name] = item.id;
      }
    });
    Object.keys(this.pathMap).forEach((item) => {
      if (this.$route.path.indexOf(item) > -1) {
        this.$store.commit("SET_SELECTEDMENUITEM", this.pathMap[item]);
      }
    });
  },
  mounted() {},
  methods: {
    getClass(row) {
      return row.id === this.$store.state.user.selectedMenuItem
        ? "button-selected"
        : "";
    },
    selectItem(row) {
      if (this.$store.state.user.selectedMenuItem !== row.id) {
        this.$store.commit("SET_SELECTEDMENUITEM", row.id);
      }
      if (/^f0[1-4]$/g.test(row.name)) {
        this.$router.push({ name: row.name });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.top-button {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
}

.top-button span {
  display: inline-block;
  height: 59px;
  border: 0;
  cursor: pointer;
  // padding: 0 15px;
  // padding-top: 10px;
  // margin: 0 2px 0 0;
  margin: 0;
}

.top-button > span > div {
  padding: 0 30px;
  // border-left: 1px solid #ddd;
  height: 45px;
  top: 7px;
  position: relative;
}

.top-button > span:hover {
  background-color: #f6f6f6;
}

// .top-button > span:hover + span > div {
//   border-left: 0;
//   padding-left: 16px;
// }

.top-button span img {
  // height: 20px;
  padding-bottom: 4px;
  padding-right: 5px;
}

.top-button .button-selected {
  border-bottom: 4px solid #fe9301;
}
</style>